<template>
  <div class="flex-container">
    <div :class="[!isZoom ? 'left' : 'left left1']">
      <div class="list">
        <Tree
          ref="refTree"
          @toggleOrgId="toggleOrgId"
          :dataList="dataList"
        ></Tree>
      </div>
      <!-- <div class="zoom" @click="zoomClick">点击缩放</div> -->
    </div>
    <div :class="[!isZoom ? 'right' : 'right right1']">
      <div class="header">
        <div class="header_left">
          <div class="org_name">{{ orgName }}</div>

          <div class="total"><i class="iconfont yonghu"></i>{{ total }}</div>
        </div>
        <div class="header_right" style="display: flex; align-items: center">
          <el-select
            size="small"
            v-model="searchSel"
            slot="prepend"
            placeholder="请选择"
            class="el_Select"
          >
            <el-option label="用户名" value="1"></el-option>
            <el-option label="手机号" value="2"></el-option>
          </el-select>
          <el-input
            :placeholder="
              searchSel == 1 ? '请输入完整的用户名' : '请输入完整的手机号'
            "
            v-model="searchVal"
            style="width: 220px; margin-right: 15px"
            size="small"
            maxlength="20"
            clearable
            @clear="searchClick"
            class="el_input"
          >
            <el-button
              slot="append"
              :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
              @click="searchClick"
            >
            </el-button>
          </el-input>

          <!-- v-if="flag || user.roleName=='TENANT_ADMIN'" -->
          <el-button
            class="el_button"
            size="small"
            icon="el-icon-plus"
            style="margin-left: 15px"
            @click="addUser"
            v-permission="{ action: 'enMember:add' }"
          >
            新增用户
          </el-button>
          <el-button
            class="el_button"
            size="small"
            icon="el-icon-plus"
            style="margin-left: 15px"
            @click="addClick"
            v-permission="{ action: 'enMember:member' }"
            v-if="role == 1 || user.roleName == 'TENANT_ADMIN'"
          >
            关联成员
          </el-button>
          <!-- v-if="user.roleName=='ORG_ADMIN' && !flag" -->
          <el-button
            class="el_button"
            size="small"
            icon="el-icon-right"
            style="margin-left: 15px"
            @click="exit"
            v-if="role != 1 && user.roleName == 'ORG_ADMIN' && isQuitOrg"
          >
            退出机构
          </el-button>
        </div>
      </div>
      <div class="content">
        <el-table
          :data="dataList"
          height="calc(100% - 65px)"
          class="table"
          :header-cell-style="headerStyle"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
            height="30"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="orgName"
            label="所属组织机构节点"
            min-width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="用户名"
            min-width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="角色"
            min-width="140"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.role.description || "" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="mobile"
            label="手机号"
            min-width="150"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column align="center" prop="role" label="岗位" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.role == 1">管理员</span>
              <span v-if="scope.row.role == 2">消防安全专员</span>
              <span v-if="scope.row.role == 3">消防安全负责人</span>
              <span v-if="scope.row.role == 4">消防监管人</span>
              <span v-if="scope.row.role == 5">专职消防安全管理人 </span>
              <span v-if="scope.row.role == 6">楼(建筑)长</span>
              <span v-if="scope.row.role == 7">维保人员</span>
            </template>
</el-table-column> -->
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <!-- v-if="(flag && user.userId!=scope.row.userId)|| user.roleName=='TENANT_ADMIN'" -->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
                v-permission="{ action: 'enMember:edit' }"
              >
                <i
                  @click="onEdit(scope.row)"
                  class="iconfont tianxie tableBtnIcon"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="重置密码"
                placement="bottom"
                v-permission="{ action: 'enMember:reset' }"
              >
                <i
                  @click="onReset(scope.row)"
                  class="iconfont zhongzhimima tableBtnIcon"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除账号"
                placement="bottom"
                v-permission="{ action: 'enMember:delete' }"
              >
                <i
                  @click="onDel(scope.row.userId)"
                  class="iconfont shanchu tableBtnIcon"
                ></i>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="dark" content="设置岗位" placement="bottom"
                v-if="(role == 1 && user.userId != scope.row.userId) || (user.roleName == 'TENANT_ADMIN' && scope.row.role != 1)">
                <i @click="edit(scope.row)" class="iconfont guanliyuan tableBtnIcon"></i>
              </el-tooltip> -->
              <!-- <el-tooltip class="item" effect="dark" content="移除" placement="bottom"
                v-if="(role == 1 && user.userId != scope.row.userId) || (user.roleName == 'TENANT_ADMIN' && scope.row.role != 1)">
                <i @click="delClick(scope.row.id)" class="iconfont anquantuichu tableBtnIcon"></i>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :page.sync="page"
          :limit.sync="limit"
          :total="total"
          @pagination="getDataList"
          class="pagination"
        >
        </pagination>
      </div>
    </div>
    <member-add ref="refMemberAdd" :orgId="orgId" :width="width"></member-add>
    <editturnOver
      ref="refeditturnOver"
      :editInfo="editInfo"
      :orgId="orgId"
    ></editturnOver>
    <addUser
      ref="refAdd"
      :roleList="roleList"
      :fixedPjtInfo="fixedPjtInfo"
      :orgName2="orgName"
    ></addUser>
    <!-- 重置密码弹框 -->
    <resetPassword
      ref="refResetPassword"
      :submitUserInfo="submitUserInfo"
    ></resetPassword>
    <edit ref="refedit" :editOrgInfo="editOrgInfo" :roleList="roleList" :orgId="orgId"></edit>
    <organization ref="reforganization"></organization>
  </div>
</template>

<script>
import {
  reqOrgUserList,
  reqOrgUserDel,
  reqTurnOver,
  reqOrgExit,
  reqAssignRoleList,
  delUser,
} from "@api/api.js";
import Tree from "./components/Unit.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import MemberAdd from "./components/MemberAdd.vue";
import editturnOver from "./components/editturnOver.vue";
import { mapState } from "vuex";
import AddUser from "./components/AddUser.vue"; //新增组件
import ResetPassword from "./components/ResetPassword.vue"; //重置密码组件
import edit from "./components/edit.vue";
import organization from "@views/login/components/organization";

export default {
  name: "",
  components: {
    Tree,
    Pagination,
    MemberAdd,
    editturnOver,
    AddUser,
    ResetPassword,
    edit,
    organization,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      searchVal: "",
      searchSel: "1", //用户名/手机号
      dataList: [],
      page: 1,
      limit: 10,
      total: 0,
      loadingSearch: false,
      isZoom: false,
      orgId: "",
      orgName: "",
      flag: false,
      role: "",
      width: "",
      editInfo: {},
      roleList: [], //角色列表
      submitUserInfo: {}, //提交的信息（重置密码用(mobile+id)）
      editOrgInfo: {},
      fixedPjtInfo:{},
      isQuitOrg: true,
    };
  },
  mounted() {
    console.log(this.$route, "this.$route");
    this.getAssignRoleList(); // 获取角色列表
    // console.log(this.user);
    // let element = this.$el.querySelector('.header')
    // let width = element.offsetWidth
    // // console.log(width);
    // this.width=width
    // // 动态设置样式
    // if(width>520){
    //   this.$el.querySelector('.el-input-group__prepend').style.cssText =
    //             'border-left: none !important;border-top: none !important;border-bottom: none !important;';
    // }else{
    //   this.$el.querySelector('.el-input-group__prepend').style.cssText =
    //             'border-left: none !important;border-bottom: none !important;';
    // }
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 获取角色列表  不同角色获取不同的角色列表
    async getAssignRoleList() {
      this.roleList = [];
      let res = await reqAssignRoleList(this.user.userId, {
        name: this.user.roleName,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.roleList = res.data.rows;
    },
    addUser() {
      // 运维创建租户  PLATFORM_ADMIN-运维
      // if (this.user.roleName === "PLATFORM_ADMIN") {
      //   this.getEnterpriseList(); // 获取租户列表
      // }
      // 租户创建单位||园区 TENANT_ADMIN-租户
      // if (this.user.roleName === "TENANT_ADMIN") {
      // this.$refs.refAdd.OrgList(); // 获取单位列表
      // }
      // this.getAssignRoleList(); // 获取角色列表
      this.$refs.refAdd.dialogVisible = true;
    },
    // 删除单位
    exit(data) {
      this.$confirm("此操作将退出该机构 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqOrgExit({
            orgId: this.orgId,
            userId: this.user.userId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("退出机构成功,请再次选择机构登录");
          // this.$refs.refTree.getDataList();
          this.$refs.reforganization.dialogVisible = true;
        })
        .catch(() => {});
    },
    // 设置单位管理员
    edit(row) {
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refeditturnOver.dialogVisible = true;
      // this.$confirm("此操作将设置该用户为单位管理员, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     const res = await reqTurnOver({
      //       orgId: this.orgId,
      //       userId: row.userId,
      //       role:1
      //     });
      //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //     this.$modal.notifySuccess("设置成功！");
      //     if(this.user.roleName=='ORG_ADMIN'){
      //       this.role ='2' // 如果是单位管理员，把单位设置给其他成员
      //       // 单位列表管理员图标隐藏
      //       this.$refs.refTree.flagtree=false;
      //     }
      //      this.getInitDataList()
      //   })
      //   .catch(() => {});
    },
    //   点击缩放左侧
    zoomClick() {
      this.isZoom = !this.isZoom;
    },
    // 切换单位
    toggleOrgId(data) {
      if (data.orgId == "") {
        this.dataList = [];
        this.total = 0;
        return;
      }
      this.fixedPjtInfo = data;//机构信息
      this.orgId = data.orgId;
      this.orgName = data.orgName;
      this.role = data.role; //role==1为管理员
      this.isQuitOrg = data.isQuitOrg;
      this.getDataList();
    },
    async getDataList() {
      let { orgId, searchSel, username, mobile, searchVal } = this;
      if (searchSel == 1) {
        username = searchVal;
        mobile = "";
      } else {
        mobile = searchVal;
        username = "";
      }
      const res = await reqOrgUserList(this.page, this.limit, {
        orgId,
        username,
        mobile,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      // this.flag=false;
      // this.dataList.forEach(res=>{
      //   // console.log(res);
      //   // console.log(this.role);
      //   // console.log(res.userId);
      //   // console.log(this.user.userId);
      //   if(this.role==1 && res.userId==this.user.userId){
      //     // console.log("管理员");
      //     this.flag=true;
      //   }
      // })
      this.total = res.data.total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    editState() {
      this.role = "2"; // 如果是普通管理员，把单位设置给其他成员
      // 单位列表管理员图标隐藏
      this.$refs.refTree.flagtree = false;
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 点击关联成员
    addClick() {
      this.$refs.refMemberAdd.dialogVisible = true;
    },
    delClick(id) {
      this.$confirm("此操作将移除该成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqOrgUserDel({ idList: [id] });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("移除成功");
          this.getInitDataList();
        })
        .catch(() => {});
    },
    onEdit(item) {
      // console.log(item,'item');
      if (item.userId == this.user.userId)
        return this.$modal.notifyWarning("不能编辑自己账户信息");
      this.editOrgInfo = JSON.parse(JSON.stringify(item));
      this.$refs.refedit.OrgList();
      this.$refs.refedit.dialogVisible = true;
    },
    onReset(row) {
      // console.log(row);
      this.submitUserInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refResetPassword.dialogVisible = true;
    },
    async onDel(userId) {
      if (userId == this.user.userId)
        return this.$modal.notifyWarning("不能删除自己账户");
      const result = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let res = await delUser(userId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除用户成功");
      this.getInitDataList();
    },
  },
};
</script>

<style scoped lang="less">
@import url("./member.less");
@import url("~@views/style/tablePage.less");

// 查询条件切换
::v-deep .el-select .el-input {
  width: 100px;
}

// 查询条件切换
// ::v-deep .el-input-group__prepend {
//   //  border-left: none !important;
//   // border-top: none !important;
//   // border-bottom: none !important;
//   // border-right: none !important;
// }

// 搜索框
::v-deep .el_input .el-input__inner {
  border-left: none !important;
  border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
  border-radius: 0px !important;
}
</style>
